<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>bootstrapWeb</title>

  <!-- 图标信息 -->
  <link rel="icon" href="./assets/images/logo.png" />
  <link rel="apple-touch-icon" href="./assets/images/logo.png" />
  <meta name="msapplication-TileImage" content="./assets/images/logo.png" />

  <!-- 引入bootstrap -->
  <link rel="stylesheet" href="./assets/css/bootstrap.min.css">

  <!-- 引入动画库 -->
  <link rel="stylesheet" href="./assets/css/animate.min.css">

  <!-- 引入重置样式文件 -->
  <link rel="stylesheet/less" href="./assets/css/reset.less">

  <!-- 引入公共样式common.less -->
  <link rel="stylesheet/less" href="./assets/css/common.less">

  <!-- 引入首页样式index.less -->
  <link rel="stylesheet/less" href="./assets/css/index.less">

  <!-- 引入第二页样式mac.less -->
  <link rel="stylesheet/less" href="./assets/css/mac.less">

  <!-- 引入第三页样式meet.less -->
  <link rel="stylesheet/less" href="./assets/css/meet.less">

  <!-- 引入第四页样式take.less -->
  <link rel="stylesheet/less" href="./assets/css/take.less">

  <!-- 引入第五页样式some.less -->
  <link rel="stylesheet/less" href="./assets/css/some.less">

  <!-- 引入第六页样式look.less -->
  <link rel="stylesheet/less" href="./assets/css/look.less">

  <!-- 引入第七页样式our.less -->
  <link rel="stylesheet/less" href="./assets/css/our.less">

  <!-- 引入第七页样式feel.less -->
  <link rel="stylesheet/less" href="./assets/css/feel.less">
</head>

<body>

  <!-- header -->
  <header id="header" class="header">

    <!-- navbar-inverse 反色导航条 -->
    <nav class="navbar navbar-inverse">
      <div class="container">

        <!-- 移动端切换导航的按钮 -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
            data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand logo wow tada" href="#" data-wow-duration="1500ms">SPIRIT8</a>
        </div>

        <!-- 导航元素 -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav navbar-right menu">
            <li><a href="#home" class="wow fadeInDownBig" data-wow-delay="0ms"><span>HOME</span> </a></li>
            <li><a href="#about" class="wow fadeInDownBig" data-wow-delay="50ms"><span>ABOUT</span> </a></li>
            <li><a href="#services" class="wow fadeInDownBig" data-wow-delay="100ms"><span>SERVICES</span> </a></li>
            <li><a href="#portfolio" class="wow fadeInDownBig" data-wow-delay="150ms"><span>PORTFOLIO</span> </a></li>
            <li><a href="#testimonials" class="wow fadeInDownBig" data-wow-delay="200ms"><span>TESTIMONIALS</span> </a>
            </li>
            <li><a href="#contact" class="wow fadeInDownBig" data-wow-delay="300ms"><span>CONTACT</span> </a></li>
          </ul>
        </div>

      </div>
    </nav>

  </header>

  <!-- banner -->
  <div class="banner" id="home">
    <video id="background" autoplay muted loop>
      <source src="./assets/images/banner.avi">
    </video>

    <!--  -->
    <div class="box">
      <div class="title wow lightSpeedIn">WELCOME ON <span>SPIRIT8</span></div>
      <div class="desc wow fadeInLeft">We are digital agency width <span>years of experience</span> and width
        <span>extraordinary
          people</span>
      </div>

      <div class="more wow rubberBand">
        <a href="#about">↓</a>
      </div>
    </div>
  </div>

  <!-- Mac -->
  <div class="mac" id="about">
    <div class="container">

      <!-- 左边电脑图 -->
      <div class="left col-md-6 wow fadeInUp" data-wow-delay="0ms">
        <img src="./assets/images/mac.png" alt="">
      </div>

      <!-- 右边文字 -->
      <div class="right col-md-6">

        <!-- 标题 -->
        <div class="info wow fadeInUp" data-wow-delay="75ms">
          <div class="small">ABOUT US</div>
          <div class="big"><span>SOME</span> WORDS <span>ABOUT US</span></div>
        </div>

        <!-- 描述文字 -->
        <p class="content wow fadeInUp" data-wow-delay="150ms">We love building and rebuilding brands through
          ourspecific skills. Using
          colour,fonts,and
          illustration,we brand companies in a way they will never forget.</p>

        <!-- 新闻列表 -->
        <ul class="newlist wow fadeInUp" data-wow-delay="225ms">
          <li><span> Mission</span> - We deliver uniqueness and quality</li>
          <li><span> Skills</span> - Delivering fast and excellent results</li>
          <li><span> Clients</span> - Satisfied clients thanks to our experience</li>
        </ul>

        <!-- 按钮 -->
        <button class="btn btn-default newbtn wow fadeInUp" data-wow-delay="300ms">BROWSE OUR WORK</button>
      </div>
    </div>
  </div>

  <!-- MEET OUR TEAM -->
  <div class="meet">
    <div class="container">

      <!-- 统一标题 -->
      <div class="common_title wow fadeInUp">
        <h1 style="color: #fff;">MEET <span>OUR TEAM</span></h1>
        <p></p>
        <p></p>
      </div>

      <input type="radio" name="more" id="more1" checked>
      <input type="radio" name="more" id="more2">
      <input type="radio" name="more" id="more3">

      <div class="row pic_list">
        <div class="items col-md-3 col-sm-6 col-xs-12 wow fadeInUp" data-wow-delay="0ms">
          <div class="pic_img">
            <img src="./assets/images/some1.jpeg" alt="" class="img1">
            <img src="./assets/images/some2.jpeg" alt="" class="img2">
            <img src="./assets/images/some3.jpeg" alt="" class="img3">
          </div>
          <div class="pic_info">
            <h2>
              Jason Statham
            </h2>
            <p>Knife designer</p>
            <p class="info">Do not seek to change what has come before. Seek to create that which has not.</p>
          </div>

        </div>
        <div class="items col-md-3 col-sm-6 col-xs-12 wow fadeInUp" data-wow-delay="50ms">
          <div class="pic_img">


            <img src="./assets/images/some1.jpeg" alt="" class="img1">
            <img src="./assets/images/some2.jpeg" alt="" class="img2">
            <img src="./assets/images/some3.jpeg" alt="" class="img3">
          </div>
          <div class="pic_info">
            <h2>
              Van Damme
            </h2>
            <p>No English</p>
            <p class="info">Do not seek to change what has come before. Seek to create that which has not.</p>
          </div>

        </div>
        <div class="items col-md-3 col-sm-6 col-xs-12 wow fadeInUp" data-wow-delay="100ms">
          <div class="pic_img">
            <img src="./assets/images/some1.jpeg" alt="" class="img1">
            <img src="./assets/images/some2.jpeg" alt="" class="img2">
            <img src="./assets/images/some3.jpeg" alt="" class="img3">
          </div>
          <div class="pic_info">
            <h2>
              Sylvester Stallone
            </h2>
            <p>Cigar Lover</p>
            <p class="info">Do not seek to change what has come before. Seek to create that which has not.</p>
          </div>
        </div>
        <div class="items col-md-3 col-sm-6 col-xs-12 wow fadeInUp" data-wow-delay="150ms">
          <div class="pic_img">
            <img src="./assets/images/some1.jpeg" alt="" class="img1">
            <img src="./assets/images/some2.jpeg" alt="" class="img2">
            <img src="./assets/images/some3.jpeg" alt="" class="img3">
          </div>
          <div class="pic_info">
            <h2>
              Jet Li
            </h2>
            <p>I need more money</p>
            <p class="info">Do not seek to change what has come before. Seek to create that which has not.</p>
          </div>
        </div>
      </div>

      <div class="more wow fadeInUp">
        <label class="label1" for="more1"></label>
        <label class="label2" for="more2"></label>
        <label class="label3" for="more3"></label>
      </div>
    </div>
  </div>

  <!-- TAKE A LOOK AT OUR SERVICES -->
  <div class="take" id="services">
    <div class="container">

      <!-- 统一标题 -->
      <div class="common_title wow fadeInUp">
        <h1 style="color: #333;">TAKE A LOOK AT <span>OUR SERVICES</span></h1>
        <p></p>
        <p></p>
      </div>

      <div class="take_info wow fadeInUp">Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of"de Finibus Bonorum et
        Malorum" (The
        Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a trea-tise on the theory of ethics, very
        popular during the Renaissance. The frst line ofLorem Ipsum, "Lorem ipsum dolor sit amet.", comes from a line in
        section 1.10.32.</div>

      <div class="row pic_list">
        <div class="items col-md-3 col-sm-6 col-xs-12 wow fadeInUp" data-wow-delay="50ms">
          <div class="pic_img"><img src="./assets/images/take1.png" alt=""></div>
          <div class="pic_box">
            <h2>
              WEB DESIGN
            </h2>
            <p class="info">The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet.", comes from a line in section
              1.10.32.</p>
          </div>
        </div>
        <div class="items col-md-3 col-sm-6 col-xs-12 wow fadeInUp" data-wow-delay="125ms">
          <div class="pic_img"><img src="./assets/images/take2.png" alt=""></div>
          <div class="pic_box">
            <h2>
              MOBILE APPS
            </h2>
            <p class="info">The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet.", comes from a line in section
              1.10.32.</p>
          </div>
        </div>
        <div class="items col-md-3 col-sm-6 col-xs-12 wow fadeInUp" data-wow-delay="200ms">
          <div class="pic_img"><img src="./assets/images/take3.png" alt=""></div>
          <div class="pic_box">
            <h2>
              PHOTOGRAPHY
            </h2>
            <p class="info">The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet.", comes from a line in section
              1.10.32.</p>
          </div>
        </div>
        <div class="items col-md-3 col-sm-6 col-xs-12 wow fadeInUp" data-wow-delay="275ms">
          <div class="pic_img"><img src="./assets/images/take4.png" alt=""></div>
          <div class="pic_box">
            <h2>
              MARKETING
            </h2>
            <p class="info">The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet.", comes from a line in section
              1.10.32.</p>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- SOME OF OUR CLIENTS -->
  <div class="some">
    <div class="container">
      <!-- 统一标题 -->
      <div class="common_title wow fadeInUp">
        <h1 style="color: #fff;">SOME OF <span>OUR CLIENTS</span></h1>
        <p></p>
        <p></p>
      </div>

      <input type="radio" name="some" id="some1" checked>
      <input type="radio" name="some" id="some2">
      <input type="radio" name="some" id="some3">

      <div class="some_img row">
        <div class="col-lg-1 block"></div>
        <div class="col-lg-2 col-md-6 col-sm-6 col-xs-12 items wow fadeInUp" data-wow-delay="50ms">
          <img class="img1" src="./assets/images/Layer 69.png" alt="">
          <img class="img2" src="./assets/images/Layer 67.png" alt="">
          <img class="img3" src="./assets/images/Layer 64.png" alt="">
        </div>
        <div class="col-lg-2 col-md-6 col-sm-6 col-xs-12 items wow fadeInUp" data-wow-delay="125ms">
          <img class="img1" src="./assets/images/Layer 65.png" alt="">
          <img class="img2" src="./assets/images/Layer 69.png" alt="">
          <img class="img3" src="./assets/images/Layer 67.png" alt="">
        </div>
        <div class="col-lg-2 col-md-6 col-sm-6 col-xs-12 items wow fadeInUp" data-wow-delay="200ms">
          <img class="img1" src="./assets/images/Layer 68.png" alt="">
          <img class="img2" src="./assets/images/Layer 64.png" alt="">
          <img class="img3" src="./assets/images/Layer 68.png" alt="">
        </div>
        <div class="col-lg-2 col-md-6 col-sm-6 col-xs-12 items wow fadeInUp" data-wow-delay="275ms">
          <img class="img1" src="./assets/images/Layer 67.png" alt="">
          <img class="img2" src="./assets/images/Layer 68.png" alt="">
          <img class="img3" src="./assets/images/Layer 65.png" alt="">
        </div>
        <div class="col-lg-2 col-md-12 col-sm-12 col-xs-12 items wow fadeInUp" data-wow-delay="350ms">
          <img class="img1" src="./assets/images/Layer 64.png" alt="">
          <img class="img2" src="./assets/images/Layer 65.png" alt="">
          <img class="img3" src="./assets/images/Layer 69.png" alt="">
        </div>
        <div class="col-lg-1 block"></div>
      </div>

      <div class="more wow fadeInUp">
        <label for="some1" class="some1"></label>
        <label for="some2" class="some2"></label>
        <label for="some3" class="some3"></label>
      </div>
    </div>
  </div>

  <!-- TAKE A LOOK AT OUR WORK -->
  <div class="look" id="portfolio">
    <div class="container">
      <!-- 统一标题 -->
      <div class="common_title wow fadeInUp">
        <h1 style="color: #333;">TAKE A LOOK AT <span>OUR WORK</span></h1>
        <p></p>
        <p></p>
      </div>

      <div class="take_info wow fadeInUp">Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of"de Finibus Bonorum et
        Malorum" (The
        Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a trea-tise on the theory of ethics, very
        popular during the Renaissance. The frst line ofLorem Ipsum, "Lorem ipsum dolor sit amet.", comes from a line in
        section 1.10.32.
      </div>

      <div class="filter">
        <div class="filter_title">
          <div class="ftitle col-xs-6">FILTER BY TYPE</div>
          <div class="ftitle col-xs-6">
            <div>
              <input type="radio" name="filter" id="all">
              <label for="all">All</label>
              <input type="radio" name="filter" id="web">
              <label for="web">Web design</label>
              <input type="radio" name="filter" id="mobile">
              <label for="mobile">Mobile design</label>
              <input type="radio" name="filter" id="photography">
              <label for="photography">Photography</label>
            </div>
            <select name="fstitle" id="fstitle" class="form-control">
              <option value="0">请选择</option>
              <option value="all">All</option>
              <option value="web">Web design</option>
              <option value="mobile">Mobile design</option>
              <option value="photography">Photography</option>
            </select>
          </div>
        </div>
        <div class="row filter_list">
          <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 items wow fadeInUp" data-wow-delay="50ms">
            <img src="./assets/images/Layer 83.png" alt="">
            <div class="info">
              <div class="info_box">
                <h4>TREND AND FASHION</h4>
                <P>Website design</P>
                <a href="#">
                  +
                </a>
              </div>
            </div>
          </div>
          <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 items wow fadeInUp" data-wow-delay="125ms">
            <img src="./assets/images/Layer 83.png" alt="">
            <div class="info">
              <div class="info_box">
                <h4>TREND AND FASHION</h4>
                <P>Website design</P>
                <a href="#">
                  +
                </a>
              </div>
            </div>
          </div>
          <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 items wow fadeInUp" data-wow-delay="200ms">
            <img src="./assets/images/Layer 83.png" alt="">
            <div class="info">
              <div class="info_box">
                <h4>TREND AND FASHION</h4>
                <P>Website design</P>
                <a href="#">
                  +
                </a>
              </div>
            </div>
          </div>
          <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 items wow fadeInUp" data-wow-delay="275ms">
            <img src="./assets/images/Layer 83.png" alt="">
            <div class="info">
              <div class="info_box">
                <h4>TREND AND FASHION</h4>
                <P>Website design</P>
                <a href="#">
                  +
                </a>
              </div>
            </div>
          </div>
          <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 items wow fadeInUp" data-wow-delay="350ms">
            <img src="./assets/images/Layer 77.png" alt="">
            <div class="info">
              <div class="info_box">
                <h4>TREND AND FASHION</h4>
                <P>Website design</P>
                <a href="#">
                  +
                </a>
              </div>
            </div>
          </div>
          <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 items wow fadeInUp" data-wow-delay="425ms">
            <img src="./assets/images/Layer 77.png" alt="">
            <div class="info">
              <div class="info_box">
                <h4>TREND AND FASHION</h4>
                <P>Website design</P>
                <a href="#">
                  +
                </a>
              </div>
            </div>
          </div>
          <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 items wow fadeInUp" data-wow-delay="500ms">
            <img src="./assets/images/Layer 77.png" alt="">
            <div class="info">
              <div class="info_box">
                <h4>TREND AND FASHION</h4>
                <P>Website design</P>
                <a href="#">
                  +
                </a>
              </div>
            </div>
          </div>
          <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 items wow fadeInUp" data-wow-delay="575ms">
            <img src="./assets/images/Layer 77.png" alt="">
            <div class="info">
              <div class="info_box">
                <h4>TREND AND FASHION</h4>
                <P>Website design</P>
                <a href="#">
                  +
                </a>
              </div>
            </div>
          </div>
          <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 items wow fadeInUp" data-wow-delay="650ms">
            <img src="./assets/images/Layer 82.png" alt="">
            <div class="info">
              <div class="info_box">
                <h4>TREND AND FASHION</h4>
                <P>Website design</P>
                <a href="#">
                  +
                </a>
              </div>
            </div>
          </div>
          <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 items wow fadeInUp" data-wow-delay="725ms">
            <img src="./assets/images/Layer 82.png" alt="">
            <div class="info">
              <div class="info_box">
                <h4>TREND AND FASHION</h4>
                <P>Website design</P>
                <a href="#">
                  +
                </a>
              </div>
            </div>
          </div>
          <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 items wow fadeInUp" data-wow-delay="800ms">
            <img src="./assets/images/Layer 82.png" alt="">
            <div class="info">
              <div class="info_box">
                <h4>TREND AND FASHION</h4>
                <P>Website design</P>
                <a href="#">
                  +
                </a>
              </div>
            </div>
          </div>
          <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 items wow fadeInUp" data-wow-delay="875ms">
            <img src="./assets/images/Layer 82.png" alt="">
            <div class="info">
              <div class="info_box">
                <h4>TREND AND FASHION</h4>
                <P>Website design</P>
                <a href="#">
                  +
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>


  </div>

  <!-- OUR CLIENTS' TESTIMONIALS -->
  <div class="our" id="testimonials">
    <div class="container">
      <!-- 统一标题 -->
      <div class="common_title wow fadeInUp">
        <h1 style="color: #fff;"><span>OUR CLIENTS' </span>TESTIMONIALS</h1>
        <p></p>
        <p></p>
      </div>

      <p class="our_info wow fadeInUp">
        THIS BOOK ISATREATISE ON THE THEORY OFETHICS,VERY POPULAR DURING THE RENAISSANCE.THE FIRSTLINE OF LOREM
        IPSUM,"LOREM IPSUM DOLOR SIT AMET..",. COMES FROMALINE IN SECTION 1.10.32.
      </p>

      <p class="our_title wow fadeInUp">
        <span>Dean Martin, </span>CEO Acme lnc.
      </p>


      <div class="more wow fadeInUp">
        <input type="radio" name="our" id="our1" checked>
        <label for="our1"></label>
        <input type="radio" name="our" id="our2">
        <label for="our2"></label>
        <input type="radio" name="our" id="our3">
        <label for="our3"></label>
      </div>
    </div>
  </div>


  <!-- FEEL FREE TO CONTACT US -->
  <div class="feel" id="contact">
    <div class="container">
      <!-- 统一标题 -->
      <div class="common_title wow fadeInUp">
        <h1 style="color: #333;">FEEL FREE TO <span>CONTACT US </span></h1>
        <p></p>
        <p></p>
      </div>

      <div class="feel_info wow fadeInUp">
        Lorem lpsum comes from sections 1. 10.32 and 1. 10.33 of "de Finibus Bonorum el Malorum" (The Extremes of Good
        and
        Evil) by Cicero, wrtten in 45 BC. This book is a treatise on the theory of ethics, very popular during the
        Renaissance.
      </div>

      <form class="feel_form">
        <div class="name form-group col-md-6 wow fadeInUp">
          <label for="username">Name <span>*</span></label>
          <input type="text" class="form-control" id="username" placeholder="">
        </div>
        <div class="email form-group col-md-6 wow fadeInUp">
          <label for="email">Email address <span>*</span></label>
          <input type="email" class="form-control" id="email" placeholder="">
        </div>
        <div class="message form-group col-md-12 wow fadeInUp">
          <label for="message">Message <span>*</span></label>
          <textarea id="message" class="form-control"></textarea>
        </div>

        <div class="form_btn col-md-12 wow fadeInUp">
          <button type="submit" class="btn btn-default">SEND</button>
        </div>
      </form>
    </div>


  </div>

  <!-- footer -->
  <div class="footer">
    <div class="container">
      <div class="col-sm-6 col-xs-12 footer_date">ALL RIGHTS RESERVED. COPYRIGHT &copy; 2014 <span>SPIRIT8</span> </div>
      <div class="col-sm-6 col-xs-12 footer_icon">
        <a href="#"><img src="./assets/images/facebook.png" alt=""></a>
        <a href="#"><img src="./assets/images/twitter.png" alt=""></a>
        <a href="#"><img src="./assets/images/google.png" alt=""></a>
        <a href="#"><img src="./assets/images/linkedin.png" alt=""></a>
        <a href="#"><img src="./assets/images/dribbble.png" alt=""></a>
      </div>
    </div>
  </div>

  <!-- 返回顶部 -->
  <div id="back">
    <a href="#home" id="gotop">
      <img src="./assets/images/top.svg" alt="">
    </a>
  </div>



  <!-- 引入jquery -->
  <script src="./assets/js/jQuery.min.js"></script>

  <!-- 引入bootstrap.js -->
  <script src="./assets/js/bootstrap.min.js"></script>

  <!-- 引入less解析js -->
  <script src="./assets/js/less.min.js"></script>

  <!-- 引入懒加载js -->
  <script src="./assets/js/wow.min.repeat.js"></script>
  <script>

    window.onload = function () {


      // 获取视频元素
      var background = document.querySelector("#background");

      // 调整视频速度
      background.playbackRate = 10;

      // 懒加载初始化
      new WOW().init();

      $(document).scroll(function () {

        //获取到滚动条到顶上的位置
        var distance = $(this).scrollTop();
        // console.log(distance);

        if (distance >= 10) {
          $("#header").css({
            backgroundColor: "#111111",
            paddingTop: 0,
          })
        } else {
          $("#header").css({
            backgroundColor: "transparent",
            paddingTop: "1em",
          })
        }
      })

      var backbtn = document.querySelector("#back");

      // 添加动画
      $("#back a").on("click", function () {
        $(this).parent().addClass("back");

        setTimeout(() => {
          $(this).parent().removeClass("back")
        }, 1000)
      })

      // 锚点的缓动效果 给特定链接元素 绑定点击事件
      $("#back a,.menu a").on("click", function () {
        // 获取链接地址上面的路径部分(不包括域名)
        //系统替换后的结果
        var LocationReplace = location.pathname.replace(/^\//, '')
        var CurrentReplace = this.pathname.replace(/^\//, '')

        //系统获取的域名部分
        var LocationHostname = location.hostname
        var CurrentHostname = this.hostname


        //你必须是跳转到当前界面的链接  才能做锚点
        if (LocationReplace == CurrentReplace && LocationHostname == CurrentHostname) {
          //获取将要跳转的锚点位置
          var $target = $(this.hash)

          //一定要当他找到锚点元素的时候，才跳转锚点
          if ($target.length > 0) {
            //获取目标元素的位置
            var pos = $target.offset().top

            //让页面的body和html 滚动到 pos这个位置
            $("html,body").animate({
              //指的就是滚动条的距离
              scrollTop: pos
            }, 1000)

            $(this).parent().remove("back")
          }

          //阻止刷新界面
          return false

        }

      })


      $(document).scroll(function () {

        //获取到滚动条到顶上的位置
        var distance = $(this).scrollTop();
        // console.log(distance);

        if (distance >= 200) {
          $("#back").show();
        } else {
          $("#back").hide();
        }
      })


      /* 修改返回顶部盒子位置 */
      var containerWidth = document.querySelector(".container").offsetWidth;

      function reviseBack() {
        if (containerWidth == 1170) {
          backbtn.style.marginLeft = "470px"
          backbtn.style.left = "50%"
        }
        if (containerWidth == 970) {
          backbtn.style.marginLeft = "385px"
          backbtn.style.left = "50%"

        }
        if (containerWidth == 750) {
          backbtn.style.marginLeft = "275px"
          backbtn.style.left = "50%"

        }
        if (containerWidth < 750) {
          backbtn.style.left = "unset"
          backbtn.style.marginLeft = "0px"
          backbtn.style.right = "20px"
        }
      }

      reviseBack();

      var doc = document,
        ele = doc.documentElement,
        bodys = doc.bodys,
        clientWidth = ele ? ele.clientWidth : bodys.clientWidth,
        clientHeight = ele ? ele.clientHeight : bodys.clientHeight;

      window.onresize = function (e) {
        //浏览器改变的时候会触发这个事件
        containerWidth = document.querySelector(".container").offsetWidth
        console.log(containerWidth);
        //获取当前浏览器宽度
        var cw = ele ? ele.clientWidth : bodys.clientWidth;

        if (cw !== clientWidth) {
          reviseBack();
        }
      }
    }
  </script>
</body>

</html>